<template>
	<div class="navbar">
		<div class="title" v-if="navbar.title != 'back'">{{ navbar.title }}</div>
		<div class="title" v-if="navbar.title == 'back'"><span class="icon iconfont icon-back" @click="back(navbar.routerName)"></span></div>
 		<el-tree
		:data="filterNavbar"
		node-key="id"
		:props="defaultProps"
		highlight-current
		default-expand-all
		ref="navbartree"
		@node-click="handleNodeClick">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>{{ node.label.name }}</span>
				<span>
					<tag color="error" class="tag_small" v-if="node.label.flag">{{ node.label.flag }}{{ node.showflag }}</tag>
				</span>
			</span>
		</el-tree>
	</div>
</template>

<script>
import {getNavbarByMenuList} from "static/js/common.js"
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
import {domain} from '@/api';

export default {
	inject: ['reload'],
	data() {
		return {
			/*默认高亮*/
			active: 0,
			navbarList: [
			// 	{
			// 		id: 1,
			// 		label: {
			// 			name: '一级 1',
			// 			flag: ''
			// 		},
			// 	}, 
			// 	{
			// 		id: 2,
			// 		label: {
			// 			name: '一级 2',
			// 			flag: 'HOT'
			// 		},
			// 		children: [
			// 			{
			// 				id: 3,
			// 				label: {
			// 					name: '二级 2-1',
			// 					flag: ''
			// 				}
			// 			},
			// 			{
			// 				id: 4,
			// 				label: {
			// 					name: '二级 2-2',
			// 					flag: 'NEW'
			// 				}
			// 			}
			// 		]
			// 	}, 
			// 	{
			// 		id: 5,
			// 		label: {
			// 			name: '一级 3',
			// 			flag: ''
			// 		},
			// 		children: [
			// 			{
			// 				id: 6,
			// 				label: {
			// 					name: '二级 3-1',
			// 					flag: ''
			// 				}
			// 			},
			// 			{
			// 				id: 7,
			// 				label: {
			// 					name: '二级 3-2',
			// 					flag: ''
			// 				}
			// 			}
			// 		]
			// 	}
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			}
		};
	},
	created: function() {
		/*设置默认高亮*/
		this.currNavbar()
	},
	methods: {
		/*点击节点 跳转路由*/
		handleNodeClick: function(node){
			// console.log(node.label.vueRouter)
			let query = {}
			if(node.vueRouter != ''){
				this.$localstorage.set('currNavbarID', node.id);//保存当前navbar的ID
				this.$router.push({
					name: node.label.vueRouter,
					query: query
				})
			}
		},
		/*返回上一层*/
		back: function(routerName){
			if( this.$localstorage.get('navbarBack') == null){
				this.$router.push({name: routerName})
				window.location.reload()
				// this.reload()
				return
			}
			this.$router.push({ name: routerName})
			let currMenuID = JSON.parse(this.$localstorage.get('currMenuID'));
			if(currMenuID != null){
				let list = getNavbarByMenuList(this.allMenuList, currMenuID)
				let title
				Object.keys(this.allMenuList).forEach((k)=>{
					if(this.allMenuList[k].id == currMenuID){
						title = this.allMenuList[k].label.name;
					}
				})
				this.setNavbar({title: title, list: list})//把 navbar数据 存入vuex
			}
			this.$localstorage.set('currNavbarID', JSON.parse(this.$localstorage.get('navbarBack')).currNavbarID)
			this.$localstorage.remove('navbarBack');//删除navbarBack
			this.currNavbar()//高亮
		},
		/*高亮当前菜单*/
		currNavbar: function(){
			/*设置默认高亮*/
			let currNavbarID = this.$localstorage.get('currNavbarID');
			if(currNavbarID != null && !isNaN(currNavbarID)){
				this.$nextTick(() => {
					this.$refs.navbartree.setCurrentKey(currNavbarID)
				})
			}
		},
		...mapMutations({
			setNavbar: 'setNavbar'
		})
	},
	watch: {
		
	},
	computed: {
		/*把vueRouter数据，整理到label中 因为tree组件只能在label中取数据*/
		filterNavbar: function() {
			this.navbarList = [];
			if(this.navbar.list != undefined){
				for(let i=0; i<this.navbar.list.length; i++){
					if(this.navbar.list[i].showflag < 3){
						let vueRouter = ''
						if(this.navbar.list[i].vueRouter != null){
							vueRouter = this.navbar.list[i].vueRouter.name
						}
						this.navbarList.push(
							{
								id: this.navbar.list[i].id,
								label: {
									name: this.navbar.list[i].label.name,
									flag: this.navbar.list[i].label.flag,
									vueRouter: vueRouter
								}
							}
						)
						if(this.navbar.list[i].children.length > 0){
							this.navbarList[i].children = []
							for(let j=0; j<this.navbar.list[i].children.length; j++){
								if(this.navbar.list[i].children[j].showflag < 3){
									let vueRouter = ''
									if(this.navbar.list[i].children[j].vueRouter != null){
										vueRouter = this.navbar.list[i].children[j].vueRouter.name
									}
									this.navbarList[i].children.push(
										{
											id: this.navbar.list[i].children[j].id,
											label: {
												name: this.navbar.list[i].children[j].label.name,
												flag: this.navbar.list[i].children[j].label.flag,
												vueRouter: vueRouter
											}
										}
									)
								}
							}
						}
					}
				}
			}
			return this.navbarList
		},
		...mapGetters([
			'allMenuList',
			'navbar'
		])
	}
};
</script>

<style lang="stylus" scoped>
@import '~static/css/variable.styl'
.title
	width: 100%
	height: 70px
	overflow: hidden
	font-weight: bold
	line-height: 70px
	padding: 0 20px
	box-sizing: border-box
	background-color: #d5dae1
	.iconfont
		font-size: 20px
		margin: 0 auto
		display: block
		width: 20px
		height: 20px
	.iconfont:hover
		color: $color-default
		cursor: pointer
.el-tree
	background: #e8ebef
	font-size: 12px !important
	/deep/ .el-tree-node__content
		height: 30px
	/deep/ .el-icon-caret-right:before
		color: #2e2e2e
	/deep/ .is-leaf:before
		color: transparent !important
	/deep/ .el-tree-node.is-current>.el-tree-node__content
		background-color: #fff !important
	/deep/ .custom-tree-node>span
		margin-right: 10px
</style>